import React, { useState } from 'react';
import styles from './Activities.module.css';

const Activities = () => {
  // 示例活动数据
  const [activities] = useState([
    { id: 1, title: '前端技术分享会', organizer: '技术部', startDate: '2023-11-15', endDate: '2023-11-15', location: '线上', status: '进行中', participants: 45 },
    { id: 2, title: '年度团建活动', organizer: '人事部', startDate: '2023-12-01', endDate: '2023-12-03', location: '度假村', status: '筹备中', participants: 0 },
    { id: 3, title: '产品发布会', organizer: '市场部', startDate: '2023-10-20', endDate: '2023-10-20', location: '会展中心', status: '已结束', participants: 120 },
    { id: 4, title: '新员工培训', organizer: '人事部', startDate: '2023-11-01', endDate: '2023-11-02', location: '公司会议室', status: '进行中', participants: 15 },
    { id: 5, title: '技术研讨会', organizer: '技术部', startDate: '2023-11-20', endDate: '2023-11-20', location: '线上', status: '筹备中', participants: 0 },
  ]);

  const [newActivity, setNewActivity] = useState({ 
    title: '', 
    organizer: '', 
    startDate: '',
    endDate: '',
    location: '',
    status: '筹备中'
  });

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setNewActivity(prev => ({ ...prev, [name]: value }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // 在实际应用中，这里会调用API添加活动
    alert(`添加活动: ${newActivity.title} (${newActivity.organizer})`);
    setNewActivity({ title: '', organizer: '', startDate: '', endDate: '', location: '', status: '筹备中' });
  };

  return (
    <div className={styles.container}>
      <h1 className={styles.title}>活动管理</h1>
      
      <div className={styles.card}>
        <h2>活动列表</h2>
        <div className={styles.tableContainer}>
          <table className={styles.table}>
            <thead>
              <tr>
                <th>ID</th>
                <th>活动名称</th>
                <th>组织者</th>
                <th>开始日期</th>
                <th>结束日期</th>
                <th>地点</th>
                <th>状态</th>
                <th>参与人数</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              {activities.map(activity => (
                <tr key={activity.id}>
                  <td>{activity.id}</td>
                  <td>{activity.title}</td>
                  <td>{activity.organizer}</td>
                  <td>{activity.startDate}</td>
                  <td>{activity.endDate}</td>
                  <td>{activity.location}</td>
                  <td>
                    <span className={`${styles.status} ${
                      activity.status === '已结束' ? styles.ended : 
                      activity.status === '进行中' ? styles.ongoing : 
                      styles.preparing
                    }`}>
                      {activity.status}
                    </span>
                  </td>
                  <td>{activity.participants}</td>
                  <td>
                    <button className={`${styles.button} ${styles.editButton}`}>编辑</button>
                    <button className={`${styles.button} ${styles.deleteButton}`}>删除</button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      <div className={styles.card}>
        <h2>添加新活动</h2>
        <form onSubmit={handleSubmit} className={styles.form}>
          <div className={styles.formGroup}>
            <label className={styles.formLabel}>活动名称:</label>
            <input
              type="text"
              name="title"
              value={newActivity.title}
              onChange={handleInputChange}
              className={styles.formInput}
              required
            />
          </div>
          <div className={styles.formGroup}>
            <label className={styles.formLabel}>组织者:</label>
            <input
              type="text"
              name="organizer"
              value={newActivity.organizer}
              onChange={handleInputChange}
              className={styles.formInput}
              required
            />
          </div>
          <div className={styles.formGroup}>
            <label className={styles.formLabel}>开始日期:</label>
            <input
              type="date"
              name="startDate"
              value={newActivity.startDate}
              onChange={handleInputChange}
              className={styles.formInput}
              required
            />
          </div>
          <div className={styles.formGroup}>
            <label className={styles.formLabel}>结束日期:</label>
            <input
              type="date"
              name="endDate"
              value={newActivity.endDate}
              onChange={handleInputChange}
              className={styles.formInput}
              required
            />
          </div>
          <div className={styles.formGroup}>
            <label className={styles.formLabel}>地点:</label>
            <input
              type="text"
              name="location"
              value={newActivity.location}
              onChange={handleInputChange}
              className={styles.formInput}
              required
            />
          </div>
          <div className={styles.formGroup}>
            <label className={styles.formLabel}>状态:</label>
            <select
              name="status"
              value={newActivity.status}
              onChange={handleInputChange}
              className={styles.formSelect}
            >
              <option value="筹备中">筹备中</option>
              <option value="进行中">进行中</option>
              <option value="已结束">已结束</option>
            </select>
          </div>
          <button type="submit" className={styles.submitButton}>添加活动</button>
        </form>
      </div>
    </div>
  );
};

export default Activities;